---
type: tutorial
title: Écrivez votre premier article de blog en Markdown
description: |-
  Tutoriel : Construisez votre premier blog Astro —
  Ajoutez des pages en Markdown à votre site
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro'
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Maintenant que vous avez créé des pages à l'aide de fichiers `.astro`, créons quelques articles de blog en utilisant des fichiers `.md` !

<PreCheck>
  - Créez un nouveau dossier et créez un nouvel article
  - Écrivez un contenu en Markdown
  - Ajoutez des liens vers vos articles de blog sur votre page de blog
</PreCheck>

## Créez votre premier fichier `.md`

<Steps>
1. Créez un nouveau répertoire à `src/pages/posts/`. 

2. Ajoutez un nouveau fichier (vide) `post-1.md` à l'intérieur de votre nouveau dossier `/posts/`.

3. Recherchez cette page dans la prévisualisation de votre navigateur en ajoutant `/posts/post-1` à la fin de votre URL de prévisualisation existante. (par exemple, `http://localhost:4321/posts/post-1`)

4. Modifiez l'URL de prévisualisation du navigateur pour afficher `/posts/post-2` à la place. (C'est une page que vous n'avez pas encore créée.) 

    Remarquez la différence de sortie lors de la prévisualisation d'une page "vide" et d'une page qui n'existe pas. Cela vous aidera à résoudre des problèmes à l'avenir.
</Steps>

## Rédigez le contenu en Markdown

<Steps>
1. Copiez ou saisissez le code suivant dans `post-1.md`

    ```markdown title="src/pages/posts/post-1.md"
    ---
    title: 'Mon premier article de blog'
    pubDate: 2022-07-01
    description: "Il s'agit du premier article de mon nouveau blog Astro."
    author: 'Apprenti Astro'
    image:
        url: 'https://docs.astro.build/assets/full-logo-light.png' 
        alt: "Le logo complet d'Astro."
    tags: ["astro", "blogging", "apprentissage en public"]
    ---
    # Mon premier article de blog

    Publié le : 2022-07-01

    Bienvenue sur mon _nouveau blog_ dédié à l'apprentissage d'Astro ! Ici, je vais partager mon parcours d'apprentissage en construisant un nouveau site web.

    ## Ce que j'ai accompli

    1. **Installation d'Astro** : Tout d'abord, j'ai créé un nouveau projet Astro et configuré mes comptes en ligne.

    2. **Création de pages** : Ensuite, j'ai appris à créer des pages en créant de nouveaux fichiers `.astro` et en les plaçant dans le dossier `src/pages/`.

    3. **Création d'articles de blog** : C'est mon premier article de blog ! J'ai maintenant des pages Astro et des articles en Markdown !

    ## Ce qui vient ensuite

    Je vais terminer le tutoriel Astro, puis continuer à ajouter plus d'articles. Restez à l'écoute pour en savoir plus.
    ```

2. Vérifiez à nouveau la prévisualisation de votre navigateur à l'adresse `http://localhost:4321/posts/post-1`. Vous devriez maintenant voir du contenu sur cette page.

3. Utilisez les outils de développement de votre navigateur pour inspecter cette page. Remarquez que bien que vous n'ayez pas tapé d'éléments HTML, votre Markdown a été converti en HTML. Vous pouvez voir des éléments tels que des titres, des paragraphes et des éléments de liste.
</Steps>

:::note
Les informations en haut du fichier, à l'intérieur des barres de code, sont appelées "frontmatter". Ces données, y compris les tags et une image d'article, sont des informations *sur* votre article qu'Astro peut utiliser. Elles n'apparaissent pas automatiquement sur la page, mais nous y accéderons plus tard dans le tutoriel pour améliorer votre site. 
:::

## Ajoutez des liens vers vos articles

<Steps>
1. Ajoutez un lien vers votre premier article avec une balise d'ancre dans `src/pages/blog.astro` :
    ```astro title="src/pages/blog.astro" ins={16-18}
    ---
    ---
    <html lang="fr">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Accueil</a>
        <a href="/about/">À propos</a>
        <a href="/blog/">Blog</a>

        <h1>Mon blog d'apprentissage Astro</h1>
        <p>Voici où je vais publier mon parcours d'apprentissage d'Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Article 1</a></li>
        </ul>
      </body>
    </html>
    ```

2. Ajoutez maintenant deux autres fichiers dans `src/pages/posts/` : `post-2.md` et `post-3.md`. Voici un code d'exemple que vous pouvez copier-coller dans vos fichiers, ou vous pouvez créer les vôtres !

    ```md title="src/pages/posts/post-2.md"
    ---
    title: Mon deuxième article de blog
    author: Apprenti Astro
    description: "Après avoir appris Astro, je ne pouvais plus m'arrêter !"
    image: 
        url: "https://docs.astro.build/assets/arc.webp"
        alt: "Vignette des arcs Astro."
    pubDate: 2022-07-08
    tags: ["astro", "blogging", "apprentissage en public", "réussites"]
    ---
    Après une première semaine réussie d'apprentissage d'Astro, j'ai décidé d'en faire un peu plus. J'ai écrit et importé un petit composant de mémoire !
    ```

    ```md title="src/pages/posts/post-3.md"
    ---
    title: Mon troisième article de blog
    author: Apprenti Astro
    description: "J'ai eu quelques défis, mais demander de l'aide à la communauté m'a vraiment aidé !"
    image: 
        url: "https://docs.astro.build/assets/rays.webp"
        alt: "Vignette des rayons Astro."
    pubDate: 2022-07-15
    tags: ["astro", "apprentissage en public", "obstacles", "communauté"]
    ---
    Ce n'était pas toujours tout rose, mais j'adore construire avec Astro. Et, la [communauté Discord](https://astro.build/chat) est vraiment sympathique et serviable !
    ```

3. Ajoutez des liens vers ces nouveaux articles :

    ```astro title="src/pages/blog.astro" ins={18-19}
    ---
    ---
    <html lang="fr">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Accueil</a>
        <a href="/about/">À propos</a>
        <a href="/blog/">Blog</a>

        <h1>Mon blog d'apprentissage Astro</h1>
        <p>Voici où je vais publier mon parcours d'apprentissage d'Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Article 1</a></li>
          <li><a href="/posts/post-2/">Article 2</a></li>
          <li><a href="/posts/post-3/">Article 3</a></li>
        </ul>
      </body>
    </html>
    ```

4. Vérifiez votre prévisualisation dans le navigateur et assurez-vous que :

    - Tous vos liens vers Article 1, Article 2 et Article 3 conduisent à une page fonctionnelle sur votre site. (Si vous trouvez une erreur, vérifiez vos liens sur `blog.astro` ou les noms de vos fichiers Markdown.)
</Steps>


<Box icon="question-mark">
### Testez vos connaissances

1. Le contenu d'un fichier Markdown (`.md`) est converti en :
    <MultipleChoice>
        <Option isCorrect>HTML</Option>
        <Option>CSS</Option>
        <Option>JavaScript</Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">
## Liste de contrôle

<Checklist>
- [ ] Je peux créer un nouveau dossier dans `src/pages/` pour mes articles de blog.
- [ ] Je peux créer un fichier de blog en Markdown (`.md`).
- [ ] Je comprends que le Markdown est un autre langage qui, comme Astro, produit du HTML dans mon navigateur.
</Checklist>
</Box>

### Ressources

- [Cheat Sheet Markdown de The Markdown Guide](https://www.markdownguide.org/cheat-sheet/) <Badge>external</Badge>

- [Qu'est-ce que les outils de développement du navigateur ? MDN](https://developer.mozilla.org/fr/docs/Apprendre/Questions_frequentes/Quels_sont_les_outils_de_developpement_du_navigateur) <Badge>external</Badge>

- [Front Matter YAML](https://assemble.io/docs/YAML-front-matter.html) <Badge>external</Badge>
